<template>
	<view class="search flex-center" slot="header">
		<view class="left flex">
			<template v-if="leftShow">
				<m-icon @click="Jump()" :color="lIconColor" type="icon-fanhui" />
			</template>
			<slot name="left"></slot>
		</view>
		<view class="search-Item flex" @click="isGo()">
			<m-icon color="#C5C5C5" size="34" type="icon-fangdajing" />
			<input type="search" :focus="focus" v-model="search" :placeholder='placeholderText'
				placeholder-class="placeholder-class">
			<m-icon v-if="search" class="clear" color="#C5C5C5" size="16" type="icon-guanbi1" @click="onClear" />
			<m-button v-if="sButton" type="primary" @click="goSearch()" size="small">搜索</m-button>
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-search",
		data() {
			return {
				search: '',
			};
		},
		props: {
			wards: {
				type: Number,
				default: 0
			},
			params: {
				type: String,
				default: "",
			},
			focus: {
				type: Boolean,
				default: false,
			},
			isJump: {
				type: Boolean,
				default: true,
			},
			lIconColor: {
				type: String,
				default: "#fff",
			},
			leftShow: {
				type: Boolean,
				default: true,
			},
			//是否验证非空
			verify: {
				type: Boolean,
				default: true,
			},
			//搜索按钮
			sButton: {
				type: Boolean,
				default: true,
			},
			value: {
				type: String,
				default: '',
			},
			placeholderText: {
				type: String,
				default: '请输入搜索内容',
			}
		},
		watch: {
			value(val) {

				this.search = val
			},
		},
		methods: {
			onClear() {
				this.search = '';
				this.$emit('input', '')
				this.$emit('onClear', this.search)
			},
			isGo() {
				if (this.isJump) {
					const url = '/pages/home/search/search'
					const params = `?type=${this.params}` 
					this.Jump(url + params)
				}
			},
			goSearch() {
				if (!this.search && this.verify) {
					return this.Toast('请输入搜索内容')
				}
				this.$emit('input', this.search)
				this.$emit('goSearch', this.search)
			},
		},
	}
</script>

<style lang="scss">
	.search {
		padding: 23rpx 24rpx;

		// background: linear-gradient(90deg, #FA2B47 0%, #FF6619 100%);
		.search-Item {
			flex: 1;
			margin-left: 27rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 16rpx 30rpx;
			padding-left: 20rpx;
			padding-right: 4rpx;
			box-sizing: border-box;
			height: 66rpx;
			position: relative;

			input {
				flex: 1;
				padding-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.m-button {
				padding: 16rpx 36rpx;
			}

			.placeholder-class {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C5C5C5;
			}

			.clear {
				padding-right: 20rpx;
				padding-left: 10rpx;
			}
		}

		.m-button {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>